<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>polyline</title>
</head>
<body>
<div id="intrologo" class="intro-logo">
    <canvas width="100%" height="100%"></canvas>
        <script>
          var c = document.getElementsByTagName('canvas')[0],
              x = c.getContext('2d'),
              w = window.innerWidth,
              h = window.innerHeight,
              pr = window.devicePixelRatio || 1,
              f = 90,
              q,
              m = Math,
              r = 0,
              u = m.PI*2,
              v = m.cos,
              z = m.random
          c.width = w*pr
          c.height = h*pr
          x.scale(pr, pr)
          x.globalAlpha = 0.6
            function i(){
                x.clearRect(0,0,w,h)
                q=[{x:0,y:h*.7+f},{x:0,y:h*.7-f}]
                while(q[1].x<w+f) d(q[0], q[1])
            }
            function d(i,j){
                x.beginPath()
                x.moveTo(i.x, i.y)
                x.lineTo(j.x, j.y)
                var k = j.x + (z()*2-0.25)*f,
                    n = y(j.y)
                x.lineTo(k, n)
                x.closePath()
                r-=u/-50
                x.fillStyle = '#'+(v(r)*127+128<<16 | v(r+u/3)*127+128<<8 | v(r+u/3*2)*127+128).toString(16)
                x.fill()
                q[0] = q[1]
                q[1] = {x:k,y:n}
            }
            function y(p){
                var t = p + (z()*2-1.1)*f
                return (t>h||t<0) ? y(p) : t
            }
            document.getElementById("intrologo").onclick = i
            document.getElementById("intrologo").ontouchstart = i
            i()
        </script>
</body>
</html>
